<html>
  <head>
    <title>Grid网格</title>
    <style lang="text/css">
      * {
        box-sizing: border-box;
      }
      .wrapper {
        border: 2px solid #f76707;
        border-radius: 5px;
        background-color: #fff4e6;
      }
      .wrapper > div {
        border: 2px solid #ffa94d;
        border-radius: 5px;
        background-color: #ffd8a8;
        padding: 1em;
        color: #d9480f;
      }
      .wrapper {
        display: grid;
        gap: 20px;
        grid-template-columns: 1fr;
        grid-template-areas:
          "header"
          "nav"
          "content"
          "side"
          "ad"
          "footer";
      }
      @media (min-width: 500px) {
        .wrapper {
          grid-template-columns: 1fr 3fr;
          grid-template-areas:
            "header header"
            "nav nav"
            "side content"
            "ad footer";
        }
        .nav ul {
          display: flex;
          justify-content: space-between;
        }
      }
      @media (min-width: 700px) {
        .wrapper {
          grid-template-columns: 1fr 4fr 1fr;
          grid-template-areas:
            "header header  header"
            "nav    content side"
            "nav    content ad"
            "footer footer  footer";
        }
        .nav ul {
          display: flex;
          flex-direction: column;
        }
      }
      .header {
        grid-area: header;
      }
      .nav {
        grid-area: nav;
      }
      .content {
        grid-area: content;
      }
      .side {
        grid-area: side;
      }
      .ad {
        grid-area: ad;
      }
      .footer {
        grid-area: footer;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="header">The header</div>
      <div class="nav">
        <ul>
          <li><a href="">Nav 1</a></li>
          <li><a href="">Nav 2</a></li>
          <li><a href="">Nav 3</a></li>
        </ul>
      </div>
      <div class="content">
        <h1>Main article area</h1>
        <p>
          In this layout, we display the areas in source order for any screen
          less that 500 pixels wide. We go to a two column layout, and then to a
          three column layout by redefining the grid, and the placement of items
          on the grid.
        </p>
      </div>
      <div class="side">Sidebar</div>
      <div class="ad">Advertising</div>
      <div class="footer">The footer</div>
    </div>
  </body>
</html>
